<template>
  <div class="main">
    <div class="subjectDetailBox">
      <headerBack></headerBack>
      <scrollerEdit ref="scrollerBottom" lock-x :bounce="false" @on-scroll-bottom="handleReachButton" :scroll-bottom-offst="300">
        <!-- <scroller ref="scrollerBottom" lock-x :bounce="false" :scroll-bottom-offst="250"> -->
        <div>
          <div class="scroll-wrapper">
            <div style="height:0.4rem"></div>
            <div class="list" v-if="tabIndex == 1">
              <courseItem @openBuyVip="showBuyVipModle = true" :videoLists="videoList"></courseItem>
              <load-more :show-loading="showVideoLoad" :tip="tipVideomsg"></load-more>
              <div style="height:0.5rem"></div>
            </div>
            <div class="list" v-if="tabIndex == 2">
              <courseItem @openBuyVip="showBuyVipModle = true" :videoLists="textList"></courseItem>
              <load-more :show-loading="showVideoLoad" :tip="tipVideomsg"></load-more>
              <div style="height:0.5rem"></div>
            </div>
            <div class="list" v-if="tabIndex == 3">
              <!-- <courseItem @openBuyVip="showBuyVipModle = true" :videoLists="textList"></courseItem> -->
              <div class="term flex-h" v-for="item in imgTextList" :key="item.id" @click="goDetail(item.id)">
                <img class="left" :src="item.pics[0]" alt />
                <div class="flex1 right">
                  <span>{{ item.commodityName }}</span>
                  <b></b>
                </div>
              </div>
              <load-more :show-loading="showVideoLoad" :tip="tipVideomsg"></load-more>
              <div style="height:0.5rem"></div>
            </div>
          </div>
        </div>
      </scrollerEdit>
    </div>
    <BuyVip :xBuy="showBuyVipModle" :serverName="serverName" @handleCloseBuyDialog="showBuyVipModle = false"></BuyVip>
  </div>
</template>
<script>
import { getTopics } from '~/api/school'
import headerBack from '~/components/headerBack'
import ls from 'store2'
import { LoadMore } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import courseItem from '../curriculum/components/courseItem'
import BuyVip from '~/components/BuyVip'
export default {
  components: {
    BuyVip,
    courseItem,
    scrollerEdit,
    LoadMore,
    headerBack,
  },
  created() {},
  data() {
    return {
      showVideoLoad: true,
      tipVideomsg: '加载更多',
      showArticleLoad: true,
      tipArticlemsg: '加载更多',
      showTuijianLoad: true,
      tipTuijianmsg: '加载更多',
      tabIndex: 1,
      videoList: [],
      textList: [],
      imgTextList: [],
      showBuyVipModle: false,
      serverName: '查看专属升学课程',
      currentPage: 1,
    }
  },
  watch: {},
  mounted: function() {
    this.$visit('CourseHome')
    this.getTopics()
  },
  methods: {
    handleReachButton() {
      if (this.onFetching) {
        return false
      }
      this.onFetching = true
      if (this.currentPage < this.totalPages) {
        this.currentPage = this.currentPage + 1
        if (this.$route.query.type === 'video') {
          this.page = 'video_page=' + this.currentPage
          this.limit = 'video_limit=' + 20
        } else if (this.$route.query.type === 'text') {
          this.page = 'graph_page=' + this.currentPage
          this.limit = 'graph_limit=' + 20
        } else {
          this.page = 'recommend_page=' + this.currentPage
          this.limit = 'recommend_limit=' + 20
        }
        getTopics(this.page, this.limit)
          .then((res) => {
            if (this.$route.query.type === 'video') {
              this.tabIndex = 1
              let newArr = res.videos.map((item) => {
                return {
                  isTopic: true,
                  commodityType: 1,
                  commodityName: item.topic_name,
                  pics: [item.cover],
                  id: item.id,
                }
              })

              this.videoList = this.videoList.concat(newArr)
              this.totalPages = Math.ceil(res.meta.video_total / 20)
            } else if (this.$route.query.type === 'text') {
              this.tabIndex = 2
              let newArr = res.graphs.map((item) => {
                return {
                  isTopic: true,
                  commodityType: 2,
                  commodityName: item.topic_name,
                  pics: [item.cover],
                  id: item.id,
                }
              })
              this.textList = this.textList.concat(newArr)
              this.totalPages = Math.ceil(res.meta.graph_total / 20)
            } else {
              this.tabIndex = 3
              let newArr = res.recommends.map((item) => {
                return {
                  isTopic: true,
                  commodityType: 3,
                  commodityName: item.topic_name,
                  pics: [item.cover],
                  id: item.id,
                }
              })
              this.imgTextList = this.imgTextList.concat(newArr)
              this.totalPages = Math.ceil(res.meta.recommend_total / 20)
            }
            this.onFetching = false
          })
          .finally(() => {})
      } else {
        this.showVideoLoad = false
        this.tipVideomsg = '没有更多专题'
      }
    },
    goDetail(id) {
      this.commonJs.gopush('../curriculum/detail?id=' + id)
    },
    getTopics() {
      this.$loading('open')
      if (this.$route.query.type === 'video') {
        this.page = 'video_page=' + 1
        this.limit = 'video_limit=' + 20
      } else if (this.$route.query.type === 'text') {
        this.page = 'graph_page=' + 1
        this.limit = 'graph_limit=' + 20
      } else {
        this.page = 'recommend_page=' + 1
        this.limit = 'recommend_limit=' + 20
      }
      getTopics(this.page, this.limit)
        .then((res) => {
          if (this.$route.query.type === 'video') {
            this.tabIndex = 1
            this.videoList = res.videos.map((item) => {
              return {
                isTopic: true,
                commodityType: 1,
                commodityName: item.topic_name,
                pics: [item.cover],
                id: item.id,
              }
            })
            this.totalPages = Math.ceil(res.meta.video_total / 20)
          } else if (this.$route.query.type === 'text') {
            this.tabIndex = 2
            this.textList = res.graphs.map((item) => {
              return {
                isTopic: true,
                commodityType: 2,
                commodityName: item.topic_name,
                pics: [item.cover],
                id: item.id,
              }
            })
            this.totalPages = Math.ceil(res.meta.graph_total / 20)
          } else {
            this.tabIndex = 3
            this.imgTextList = res.recommends.map((item) => {
              return {
                isTopic: true,
                commodityType: 3,
                commodityName: item.topic_name,
                pics: [item.cover],
                id: item.id,
              }
            })
            this.totalPages = Math.ceil(res.meta.recommend_total / 20)
          }

          if (this.totalPages < 2) {
            this.showVideoLoad = false
            this.tipVideomsg = '没有更多专题'
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
  },
  beforeDestroy() {},
}
</script>

<style scoped lang="less">
.subjectDetailBox {
  width: 100%;
  height: 100vh;
  background: white;

  h1 {
    background: #fff;
    z-index: 10;
    position: relative;
    font-size: 0.5rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 1.2rem;
    display: block;
    height: 1.2rem;
    padding-left: 0.35rem;
    box-sizing: border-box;
  }
  //   .scroll-wrapper {
  //   }
}

.list {
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  box-sizing: border-box;
}
.term {
  width: 100%;
  height: 1.9rem;
  margin-bottom: 0.3rem;
  .left {
    width: 3.2rem;
    height: 100%;
    background: url('~@/static/header.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 0.1rem;
  }
  .right {
    padding-left: 0.3rem;
    box-sizing: border-box;
    span {
      display: block;
      font-size: 0.3rem;
      font-family: 'PingFangSC-Semibold', PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.4rem;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      height: 0.8rem;
    }
    b {
      display: block;
      font-size: 0.28rem;
      font-family: 'PingFangSC-Regular', PingFangSC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin-top: 0.5rem;
      height: 0.4rem;
    }
  }
}
</style>
